<script src="/scripts/nicedit_files/nicEdit-latest.js" type="text/javascript"></script>		
<script type="text/javascript" src="/scripts/common.js"></script>
<script src="/scripts/jquery.fcbkcomplete.js" type="text/javascript" charset="utf-8">
</script>
<link type="text/css" href="/styles/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="/styles/style.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" media="screen" href="/scripts/nicedit_files/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/scripts/nicedit_files/spellchecker.css" />
<script type="text/javascript" src="/scripts/nicedit_files/jquery-impromptu.js"></script>
<script type="text/javascript" src="/scripts/nicedit_files/jquery.spellchecker.js"></script>
<script type="text/javascript" src="/scripts/nicedit_files/jquery-impspeller.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#various1").fancybox({
		'titlePosition'		: 'inside',
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'none'
		});
	});	
$(document).ready(function(){                
                $("#select3").fcbkcomplete({
                    json_url: "/expressions/index/compose",
                    addontab: true,                   
                    maxitems: 10,
                    input_min_size: 0,
                    height: 10,
                    cache: true,
                    newel: true,
                    select_all_text: "select",
                });
            });	
</script>

<script type="text/javascript">
			$(function() {			
			if(document.getElementById("intensity").value!="")
			{
			   a=document.getElementById("intensity").value;
			}else{
			   a=2;
			 }
		$( "#slider-range-min" ).slider({
			range: "min",
			value: a,
			min: 1,

			max: 3,

			slide: function( event, ui ) {

				$( "#intensity" ).val(ui.value );

			}

		});

		$( "#intensity" ).val( $( "#slider-range-min" ).slider( "value" ) );

	});
</script>
<script type="text/javascript">
//<![CDATA[

$(function(){
	$('#swfupload-control').swfupload({
		upload_url: "/expressions/index/upload-images",
		file_post_name: 'vfile',
		file_size_limit : "3 MB",
		file_types : "*.jpeg;*.gif;*.doc;*.xls;*.ppt;*.png;",
		file_types_description : "Files",
		flash_url : "/scripts/swfupload/swfupload.swf",
		button_image_url : "http://www.swfupload.org/button_sprite.png", 
		button_width : 61, button_height : 22, 
		button_text : "<span class='redText'>Attach File</span>", 
		button_text_style : ".redText { color:#53b3e6; font:normal 12px arial;}", 
		button_cursor : SWFUpload.CURSOR.HAND,
		button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_text_left_padding : 3, 
		button_text_top_padding : 2,		
		button_width : 114,
		button_height : 29,
		button_placeholder : $('#button')[0],
		debug: false
		//alert(upload_url);exit; 
	})
			.bind('fileQueued', function(event, file){
          	var imgfile = file.name;
			var listitem='<li id="'+file.id+'">';
				if(imgfile.length > 40)
			 {
				listitem+='File: <em>'+(imgfile.slice(0, 20))+'...'+imgfile.slice(-10)+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>';
				}else{
				listitem+='File: <em>'+imgfile+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>';
				}
				listitem+='<div class="progressbar" ><div class="progress" ></div></div>'+
				'<p class="status" >Pending</p>'+
				'<span class="addarticle" ></span>&nbsp;&nbsp;'+
				'<span class="cancel" >&nbsp;</span>'+
				'</li>';
			$('#log11').append(listitem);
			$('li#'+file.id+' .cancel').bind('click', function(){
				var swfu = $.swfupload.getInstance('#swfupload-control');
				swfu.cancelUpload(file.id);
				$('li#'+file.id).slideUp('fast');
			});
			// start the upload since it's queued
			$(this).swfupload('startUpload');
			
		})
		.bind('fileQueueError', function(event, file, errorCode, message){
			
			try {
					if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
							alert("" + (message === 0 ? "You have reached the upload limit." : "You can upload " + (message > 1 ? "up to " + message + " files." : "one file only.")));
							return;
					}

					switch (errorCode) {
					case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
							alert('Size of the file '+file.name+' is greater than limit');
							break;
					case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
							alert('Size of the file '+file.name+' is too low');
							break;
					case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
							alert("Invalid file type selected. ");
							break;
					default:
							if (file !== null) {
												}
							alert("Invalid file selected. ");
							break;
					}
				} catch (ex) {
					alert(ex);
				}

		})	
		.bind('uploadStart', function(event, file){
			$('#log11 li#'+file.id).find('p.status').text('Uploading...');
			$('#log11 li#'+file.id).find('span.progressvalue').text('0%');
			$('#log11 li#'+file.id).find('span.cancel').hide();
		})
		.bind('uploadProgress', function(event, file, bytesLoaded){		
			var percentage=Math.round((bytesLoaded/file.size)*100);
			$('#log11 li#'+file.id).find('div.progress').css('width', percentage+'%');
			$('#log11 li#'+file.id).find('span.progressvalue').text(percentage+'%');
		})
		.bind('uploadSuccess', function(event, file, serverData){
		//alert(serverData);
			var divId = parseInt(document.getElementById('hidCount1').value);
			addFile(serverData,'1',file.id);
			document.getElementById('filenm').value = serverData;
			var item=$('#log11 li#'+file.id);
			item.find('div.progress').css('width', '100%');
			item.find('span.progressvalue').text('100%');
			item.addClass('success').find('p.status').html('Completed!!! ');
			var name = serverData.split(".",2);
			var actimgName = serverData.split("_-_",2);
			var cleanimgactName = (actimgName[1].replace(/_/g," "));
			item.addClass('success').find('p.status').append(cleanimgactName+'<a class="wht_bt"  href="javascript:void(0)" onclick="deleteBlock(\''+divId+'\',\''+trim(serverData)+'\',\'1\');"  ><span><img src="/images/CloseIcon.png" alt="cross" id="close_1" class="align_X img_pointer"/></span></a>');;
			//item.addClass('success').find('span.addarticle').html('<a href="javascript:addToArticle(\''+serverData+'\');">Insert into article</a>');
		})
		.bind('uploadComplete', function(event, file){
			$(this).swfupload('startUpload');
		})
		
	
});	
function change_bg(liid)
  {
	//alert(liid);
	 var arr=document.getElementById("mycolorband").getElementsByTagName("a");
	 //alert(arr.length);
	 for(var i=0;i<arr.length;i++)
	 {
		 aid=arr[i].id;
		 if(aid==liid)
		 {
			document.getElementById(aid).setAttribute('class','active');
			 //document.getElementById(aid).style.background="url(/images/color_image/"+aid+".png)";
		 }
		 else
		 {
			 document.getElementById(aid).removeAttribute('class','active');
		 }
	 }
  }
	  
function addFile(fileName,i,swfid)
{
	var divId = parseInt(document.getElementById('hidCount'+i).value);
	document.getElementById('hidCount'+i).value = parseInt(document.getElementById('hidCount'+i).value) + 1;
	oItemThumbDiv = document.createElement('div');
	oItemThumbDiv.style.width = "200px";
	oItemThumbDiv.style.paddingLeft = "120px";
	oItemThumbDiv.setAttribute('name','content_'+i+'_'+divId);
	oItemThumbDiv.setAttribute('id','content_'+i+'_'+divId);
	oItemThumbDiv.setAttribute('bgcolor',"#ccf9b9");
	var name = fileName.split(".",2);
	var actimgName = fileName.split("_-_",2);
	var cleanimgactName = (actimgName[1].replace(/_/g," "));
	//alert(fileName);
	//alert(actimgName);
	//oItemThumbDiv.innerHTML = '<div style="width:466px; height:auto; float:left;"><input type="hidden" name="fileNames'+'[]" value="'+fileName+'"/><input type="hidden" name="featured_values'+'[]" id="hid_'+swfid+'" value="0" /><div class="bor_bot_1 pad_tb_10"><div class="float_l width_9 pad_t_40"><img src="/images/delet_ad_icon.png" onclick="deleteBlock(\''+divId+'\',\''+fileName+'\',\''+i+'\');"/></div><div class="float_l width_5 pad_t_40">';
	if(cleanimgactName.length > 40) {
	cleanimgactName=(cleanimgactName.slice(0, 20))+'...'+cleanimgactName.slice(-10);
	} else{
	cleanimgactName= cleanimgactName;
	}
	//oItemThumbDiv.innerHTML = '<div style="width:545px; height:auto; float:left; border:0px solid #f00;"><input type="hidden" name="fileNames'+'[]" value="'+fileName+'"/><div class="bor_bot_1 pad_tb_10"><div class="float_l width_5 pad_t_40">'+cleanimgactName[1].replace(/_/g," ")+'</div></br><div class="clear"></div><div class="float_l width_7" id="'+name[0]+'"><img src="/Uploads/exercise/images/'+fileName+'" onclick="javascript:void(0);return false;" height="90" width="90" /></div><div class="float_l width_9 pad_t_40"><a class="wht_bt"  href="javascript:void(0)"  onclick="deleteBlock(\''+divId+'\',\''+fileName+'\',\''+i+'\');" ><span>Remove</span></a></div><div class="clear"></div></div></div>';
	oItemThumbDiv.innerHTML+='</div><input type="hidden" name="fileNames'+'[]" value="'+fileName+'"/><div id="'+name[0]+'"></div><div class="clear"></div></div></div>';
	document.getElementById('content_upload'+i).appendChild(oItemThumbDiv);
}
function addToArticle(id)
{
	var divId = id.split('.');
    var image_div = $('#'+divId[0]).html();
	//FCKeditorAPI.GetInstance('description').InsertHtml(image_div);   
}
//Function for deleting the image block
function deleteBlock(divid,filename,i)
{ 
	//alert(i);
	if(confirm('Do you really want to delete ?')) {
		$.ajax({
		type: "POST",
		dataType: "json",
		url: "/expressions/index/remove?filename="+filename,
		success: function(data){
			reletedDetails = data;
		}
		});
	document.getElementById('content_upload'+i).removeChild(document.getElementById('content_'+i+'_'+divid));
	var m=parseInt(i)-1;
	document.getElementById('SWFUpload_'+m+'_'+divid).style.display = 'none';
	} else {
		return false;
	}

}

//]]>
</script>


<div class="PopUp">
		<?php if($ctx->type!="") {?>
		<form enctype="multipart/form-data" id="messageform" name="messageform" method="POST" action="/expressions/index/send-drafts/<?php echo $ctx->expr_id; ?>" >
		<? } else { ?>
		<form enctype="multipart/form-data" id="messageform" name="messageform" method="POST" action="/expressions/index/save" >
		<? } ?>
		<p class="Title">Compose</p>
		<input type="hidden"  name="intensity" id="intensity"   value="2"/>
		<input type="hidden"  name="color_id" id="color_id"   value="1"/>
		<input type="hidden" name="unums" value="1" id="unums"  />
		<div id="Compose">
		<div class="pad_123">
		<div class="EmoType Fleft">
		<strong class="Fleft pad_t8">Emotion Type</strong>
		<ul id="mycolorband">
					<li><a href="javascript:void(0);" name="anger" id="anger"  onclick="document.getElementById('color_id').value=1;change_bg('anger');" style="width:45px; height:23px;"><img src="/images/Emot_1.png" border="0" alt="Anger" title="Anger" /></a></li>
					<li><a href="javascript:void(0);" name="anticipation"  id="anticipation" onclick="document.getElementById('color_id').value=2;change_bg('anticipation');" style="width:80px;"><img src="/images/Emot_2.png" border="0" alt="Anticipation" title="Anticipation" /></a></li>
					<li><a href="javascript:void(0);" name="joy" id="joy"  onclick="document.getElementById('color_id').value=3;change_bg('joy');" style="width:65px;"><img src="/images/Emot_3.png" border="0" alt="Joy" title="Joy" /></a></li>
					<li><a href="javascript:void(0);" name="trust" id="trust"  onclick="document.getElementById('color_id').value=4;change_bg('trust');" style="width:65px;"><img src="/images/Emot_4.png" border="0" alt="Love" title="Love" /></a></li>
					<li><a href="javascript:void(0);" name="fear" id="fear"  onclick="document.getElementById('color_id').value=5;change_bg('fear');" style="width:60px;"><img src="/images/Emot_5.png" border="0" alt="Fear" title="Fear" /></a></li>
					<li><a href="javascript:void(0);" name="surprise" id="surprise"  onclick="document.getElementById('color_id').value=6;change_bg('surprise');" style="width:70px;"><img src="/images/Emot_6.png" border="0" alt="Surprise" title="Surprise" /></a></li>
					<li><a href="javascript:void(0);" name="sadness" id="sadness"  onclick="document.getElementById('color_id').value=7;change_bg('sadness');" ><img src="/images/Emot_7.png" border="0" alt="Sadness" title="Sadness" /></a></li>
		
		</ul>
		</div>
		<div class="clear"></div>
		</div>
		<div class="pad_t8">
		<label>To</label>
		<select id="select3" name="select3">
		<?php if($ctx->type!="") { ?>
		<?php foreach($ctx->email as $email) { ?>
			<option value="<?php echo $email;?>" class="selected"><?php echo $email;?></option>
			<?php } ?>
		<? } else { ?>
		<option value="<?php echo $ctx->email;?>" class="selected"><?php echo $ctx->email;?></option>
		<? } ?>
		</select>
		<div class="clear"></div>
		</div>
		<div id="group_icon" class="pad_t8"><label>&nbsp;</label><img onclick="showGroups();" src="/images/ComposeGrpIcon.png" title="Add Group"/></div>
		<div class="clear"></div>
		<div class="pad_t8" id="sgrp" style="display:none;">
		<label>Select Group</label>
		<select id="group" name="group" class="medium">
													<option value="0" >--- Options ---</option>
													<?php 
													 $i=0;
													while($i<($ctx->count))
													{ ?>
													<?php if($ctx->groups[$i]['group_id'] == $ctx->group_id) { ?>
													
														<option value="<?php echo $ctx->groups[$i]['group_id'];; ?>" selected="selected"><?php echo $ctx->groups[$i]['name']; ?></option>  
													   
													<?php } else { ?>
													<option value="<?php echo $ctx->groups[$i]['group_id'];; ?>"><?php echo $ctx->groups[$i]['name']; ?></option>  
													<?php } ?>
													<?php $i++; }?>
		</select>
		<div class="clear"></div>
		</div>
		<div class="pad_t8">
		<label>Subject</label><input type="text" id="subject" name="subject" value="<?php echo $ctx->expr_details['subject'];?>" />
		<div class="clear"></div>
		
		</div>
		<div class="pad_t8">
		<label>&nbsp;</label>
		<div class="float_l pad_l_10" id="swfupload-control">
				<input type="button" id="button"/>
				</div>
				
		</div>
		<div class="clear"></div>
		<div class="pad_t8">
		<label>&nbsp;</label>
		<?php if($ctx->type!="") {?>
		<?php if(count($ctx->attachment_name)!=0) foreach($ctx->attachment_name as $attachs) {
			$name = explode('_-_',$attachs);
			echo $name[1];  ?>
			<a class="wht_bt" onclick="deleteBlock('0','<?php echo $attachs; ?>','1');" href="javascript:void(0)"><span>
			<img id="close_1" class="align_X img_pointer" alt="cross" src="/images/CloseIcon.png"/>
			</span></a>
			<?php } ?>
			<? } ?>
		</div>
		<div class="clear"></div>
		<div class="pad_t8">
		<label>&nbsp;</label>

				<input type="hidden" name="hidCount1" id="hidCount1" value="0" />
				<input type="hidden" name="filenm" id="filenm" value="" />
			<div class="float_l pad_l_10">
				<p id="queuestatus"></p>
				<ol id="log11"></ol>
				<div id="content_upload1"></div>
		<div class="clear"></div>
		</div>
		</div>
		<div class="pad_t8">
		<input type="hidden" name="sendType" id="sendType" value="" />
		<table border="0" cellpadding="0" cellspacing="0">
		  <tr>
			<td><label>Message</label></td>
			<td><textarea name="message" id="message"><?php echo $ctx->expr_details['message'];?></textarea></td>
		  </tr>
		</table>
		<div class="clear"></div>
		</div>
		<div class="pad_t8 pad_1108">
		<a class="Button" href="javascript:void(0);" onclick="valid_messageform(document.messageform,1);"><span>Send</span></a><a class="Button" href="javascript:void(0);" onclick="valid_messageform(document.messageform,0);"><span>Save as Draft</span></a><a class="Button" href="javascript:void(0);" onclick="javascript:tb_remove();"><span>Cancel</span></a>
		<p class="Fleft pad_115 pad_t5"><?php if(($ctx->type!="" && $ctx->anonymous)==1) { ?><input type="checkbox" checked="checked" id="checkbox" name="checkbox" border="0" align="left" style="width:15px;border:0;" class="pad_115"/>
		<? } else { ?>
		<input type="checkbox" id="checkbox" name="checkbox" border="0" align="left" style="width:15px;border:0;" class="pad_115"/>
		<? } ?>
		&nbsp;<span class="txt_sm">Send as Anonymous</span> </p>
		</div>
		<div class="clear"></div>
		</div>
		<?php if($ctx->type!="") { ?>
		</form>
		<? } else { ?>
		</form>
		<? } ?>
		</div>
<script type="text/javascript">
	//<![CDATA[
function valid_messageform(frm,strmsg)
{

//alert(frm);
$('#message').val(nicEditors.findEditor('message').getContent());
	var result = false;
	var result1 = false;
         //var SelBranchVal = "";
		 if(frm.select3.value=="")
	{
	 alert("${php: this.translate('valid_email')}") ;
	 return false;
	 }
         var x = 0;
			//alert(frm.select3.length);return false;
         for (x=0;x<=frm.select3.length;x++)
         {
			if(frm.select3[x])
			{
				emailId = frm.select3[x].value;
				if(isValidEmailAddress(emailId))
				{
				$('#divfrndsEmail').html('');
				} 
				else {
					alert("${php: this.translate('errmsg_valid_email')}");
					return false;
				}
			}

         }
		result = !isEmpty(frm.subject, "${php: this.translate('errmsg_subject')}") ;
		//if(result) result = !isEmpty(frm.color_id, "Please Select Emotion type") ;
	$('#sendType').val(strmsg);
	if(result)
	{
		$('#messageform').submit();
	}
	//alert(result);
	//return result;
}

	function openpreview(frm)
	{
		var result = false;
	var result1 = false;
	result=!isEmpty(frm.select3, "Please enter email") ;
	if(result) result = !isEmpty(frm.subject, "Please Enter subject") ;

		if(result) result = !isEmpty(frm.color_id, "Please Select Emotion type") ;
	if(result) result = !isEmpty(frm.message, "Please Enter Message") ;
	if(result){
	  result = validInput(frm.message.value, "You might have entered symbols(<>[]) in your message please remove them") ;
	}
		if(result)
		{
		var color=document.getElementById('color_id').value;
		window.open ('/expressions/index/preview1/'+color+'', 'newwindow', config='height=500,width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, directories=no, status=no');
		}
	}
	function showGroups()
	{
		$('#sgrp').show();
		$('#group_icon').hide();
	}
//]]>
	</script>
	
<script type="text/javascript">			
	//------------------------------------------
	// create the button for spellcheck
	//------------------------------------------
	var nicExampleOptions = {
		buttons : { 'spellcheck' : {name : __('Check Spelling'), type : 'nicEditorSpellCheckButton' } },
		iconFiles : { 'spellcheck' : '/images/spellcheck.gif' }
	};
	
	var nicEditorSpellCheckButton = nicEditorButton.extend({   
		mouseClick : function() { 
			runImpspellerNicEdit(this.ne.selectedInstance);
		}
	});
	
	nicEditors.registerPlugin(nicPlugin,nicExampleOptions);
	
	//------------------------------------------
	// create the editor
	//------------------------------------------
		new nicEditor({buttonList : ['fontSize','bold','italic','underline','html','spellcheck']}).panelInstance('message');
	//------------------------------------------
	// our function to check spelling
	//------------------------------------------
	function runImpspellerNicEdit(instance){
		var editor = instance;
		var mp = editor.getContent();
	
		$.impspeller(mp,{
			success: function(text,html,el){
				editor.setContent(html);
				editor.saveContent();
			}
		});
	}
	</script>